/**
 * 工具栏
 */
import React,{Component}  from 'react'
import style from './index.less'
import {DatePicker,Select} from 'antd'
import moment from 'moment'


const Option = Select.Option;
// 日期下拉组件
const MyDatepicker=({
    tag,
    date,
    dispatch,
    location:{
      pathname,
      query
    }
  })=>{
    // 属性对象定义
    const myProps={
      defaultValue:moment(date)||'',
      disabled:tag.search(/realtime/)>-1?true:false,
      className:tag.search(/realtime/)>-1?'disabled':'',
      value:moment(date)||'',
      format:tag.search(/realtime/)>-1?'YYYY/MM/DD HH:mm:ss':'YYYY/MM/DD',
      onChange:(value, dateString) => {
        const selectDate=dateString.replace(/\//g, "")
        if(selectDate!=date){
          const myQuery=(tag.search(/Target/)>-1)?{
            date:selectDate,
            at:query.at
          }:{
            date:selectDate,
          }

          dispatch({
            type: `${tag}/changeRouter`,
            payload: {
              pathname,
              query:myQuery
            }
          })
        }
      },
      //style:{width:tag.search(/realtime/)>-1?160:120}
      style:{width:tag.search(/realtime/)>-1?168:128}
    }
    return(
      <div className={style.datepicker}>
        <DatePicker {...myProps}/>
      </div>
    )
}
// 产品下拉组件
const MyFundSelect=({
    tag,
    date,
    fundId,
    fundList,
    dispatch,
    location:{
      pathname,
      query
    }
  })=>{
    // 属性对象定义
    const myProps={
      defaultValue:fundId,
      data:fundList,
      value:fundId,
      onChange:(value) => {
        if(value!=fundId){
          let myQuery
          if(tag.search(/realtime/)>-1){
            if(tag.search(/Target/)>-1){
              myQuery={
                fundId:value,
                at:query.at
              }
            }else{
              myQuery={
                fundId:value
              }
            }
          }else{
            if(tag.search(/Target/)>-1){
              myQuery={
                date,
                fundId:value,
                at:query.at
              }
            }else{
              myQuery={
                date,
                fundId:value
              }
            }
          }
          dispatch({
            type: `${tag}/changeRouter`,
            payload: {
              pathname,
              query:myQuery
            }
          })

        }
      },
      style:{width:200}
    }
    return(
      <div className={style.select}>
        <Select {...myProps}>
        {
          myProps.data.map((item,index)=><Option value={item.value} key={index}>{item.value}</Option>)
        }

        </Select>
      </div>
    )
}
// 股票代码组件
const MyStockSelect=({
    tag,
    date,
    fundId,
    stockCode,
    stockList,
    dispatch,
    location:{
      pathname,
      query
    }
  })=>{
    // 属性对象定义
    const myProps={
      defaultValue:query.stockCode,
      data:stockList,
      value:stockCode,
      onChange:(value)=>{
        if(value!=stockCode){
          let myQuery
          if(tag.search(/realtime/)>-1){
            if(tag.search(/Target/)>-1){
              myQuery={
                fundId:fundId,
                stockCode:value,
                at:query.at
              }
            }else{
              myQuery={
                fundId:fundId,
                stockCode:value
              }
            }
          }else{
            if(tag.search(/Target/)>-1){
              myQuery={
                date:date,
                fundId:fundId,
                stockCode:value,
                at:query.at
              }
            }else{
              myQuery={
                date:date,
                fundId:fundId,
                stockCode:value
              }
            }
          }

          dispatch({
              type: `${tag}/changeRouter`,
              payload: {
                pathname,
                query:myQuery
              }
            })
        }
      },
      style:{width:200}
    }
    return(
      <div className={style.select}>
        <Select {...myProps}>
        {
          myProps.data.map((item,index)=><Option value={item.value} key={index}>{item.value}</Option>)
        }

        </Select>
      </div>
    )
}

// 工具栏组件
const ToolBar =(props)=>{
  const {
    date,
    fundId,
    fundList,
    stockCode,
    stockList
  }=props
  return (
    <div className={`toolbar ${style.toolbar}`}>
      <MyDatepicker  {...props}/>
      {
        fundId&&fundList?<MyFundSelect {...props}/>:null
      }
      {
        stockCode&&stockList?<MyStockSelect {...props}/>:null
      }
  </div>
  )
}

ToolBar.propTypes={
  date:React.PropTypes.string,//日期
  fundId:React.PropTypes.string,//产品ID
  fundList:React.PropTypes.array,//产品列表
  stockCode:React.PropTypes.string,//股票代码
  stockList:React.PropTypes.array,//股票代码列表
  dispatch:React.PropTypes.func.isRequired,//方法
  location:React.PropTypes.object.isRequired//路由对象
}

export default ToolBar
